<template>
  <div class="about">
     <!--搜索-->
        <el-row>
            <el-col :span="6"><el-input v-model="dictType" size="mini" placeholder="请输入字典类型"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <!--分页列表显示-->
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="dictCode"
                        label="字典编码">
                </el-table-column>
                <el-table-column
                        prop="dictLabel"
                        label="字典标签">
                </el-table-column>
                <el-table-column
                        prop="dictValue"
                        label="字典键值">
                </el-table-column>
                
                <el-table-column
                      width="112px"
                        prop="dictType"  
                        label="字典类型">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态(0正常 1停用)"
                        :formatter="dictStatus"
                        >
                </el-table-column>
                <el-table-column
                        prop="createBy"
                        label="创建者">
                </el-table-column>
                <el-table-column
                        width="103px"
                        prop="createTime"
                        label="创建时间">
                        <template slot-scope="scope">
                            {{scope.row.createTime | dateFilter("yyyy-mm-dd hh:mm:ss")}}
                        </template>
                </el-table-column>
                <el-table-column
                        prop="updateBy"
                        label="更新者">
                </el-table-column>
                <el-table-column
                        width="103px"
                        prop="updateTime"
                        label="更新时间">
                        <template slot-scope="scope">
                            {{scope.row.updateTime | dateFilter("yyyy-mm-dd hh:mm:ss")}}
                        </template>
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作" width="270">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button  class="el-icon-delete"
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <!--添加 弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                        <el-form-item label="字典标签" prop="dictLabel">
                        <el-input v-model="ruleForm.dictLabel"></el-input>
                    </el-form-item>
                    <!-- </el-form-item> -->
                    <el-form-item label="字典键值" prop="dictValue">
                        <el-input v-model="ruleForm.dictValue"></el-input>
                    </el-form-item>
                    <el-form-item label="字典类型" prop="dictType" :label-width="formLabelWidth">
                    
                        <el-select v-model="ruleForm.dictType" placeholder="请选择">
                            <el-option v-for="item in optionsType" :key="item.dictCode" :label="item.dictType" :value="item.dictType"></el-option>
                        </el-select>
                    
                    </el-form-item>
                    <el-form-item label="状态" prop="status" >
                        <el-radio v-model="ruleForm.status" label="0">正常</el-radio>
                        <el-radio v-model="ruleForm.status" label="1">停用</el-radio>
                    </el-form-item>
                    <el-form-item label="创建者" prop="createBy">
                        <el-input v-model="ruleForm.createBy"></el-input>                 
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>

         <!--更新弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogFormVisibles">
                <el-form :model="form">
                    <el-form-item label="字典标签" >
                        <el-input v-model="form.dictLabel" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="字典键值" >
                        <el-input v-model="form.dictValue" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="字典类型" >
                        <el-input v-model="form.dictType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" >
                        <el-radio v-model="form.status" label="0">正常</el-radio>
                        <el-radio v-model="form.status" label="1">停用</el-radio>
                    </el-form-item>
                    <el-form-item label="创建者" >
                        <el-input v-model="form.createBy" auto-complete="off"></el-input>                 
                    </el-form-item>
                    <el-form-item label="更新者" >
                        <el-input v-model="form.updateBy" auto-complete="off"></el-input>                 
                    </el-form-item>
                    <el-form-item label="备注" >
                        <el-input v-model="form.remark" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibles = false">取 消</el-button>
                    <el-button type="primary" @click="Update">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
  </div>
</template>
<script>
export default {
      data() {
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                dictType:'',//查询功能
                dialogFormVisible:false,
                dialogFormVisibles:false,
                formLabelWidth: '',
                optionsType:[],
                title:'字典添加',
                form:{},
                ruleForm:{},
                rules: {
          dictLabel: [
            { required: true, message: '请输入字典表签', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在3到5个字符，不可重复', trigger: 'blur' }
          ],
          dictValue: [
            { required: true, message: '请输入字典键值', trigger: 'blur' },
          ],
          createBy: [
            { required: true, message: '请输入创建者', trigger: 'blur' },
          ],
           dictType: [
            { required: true, message: '请输入字典类型', trigger: 'blur' },
          ],
           status: [
            { required: true, message: '请输入字典状态', trigger: 'blur' },
          ]
                },
                pickerOption:{
                    shortcuts: {
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                  },
                },
                pickerOptions:{
                    shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                    }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                    }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
             value1: '',
             value2: '',
      };
      },
       created:function(){
                this.loadData();
                this.loadType();
            },
   
            methods:{
                //加载数据
                loadData(){
                   //动态菜单请求
                          this.$http.post("/api/cs/dictData/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            dictType:this.dictType
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                              }
                                })
                    
                },
        loadType() {
            this.$http.post('/api/cs/dictData/query', {
            }).then((response) => {
                console.log(response);
                this.optionsType = response.data.data;
            });
        },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                },
                //查询方法
                search(){
                   this.loadData();
                },
                //处理添加
                handleAdd(){
                    //清空原来form
                    this.form={};
                    //更新显示名称
                    this.title="用户添加";
                    //对话框显示
                    this.dialogFormVisible=true;
                    this.$refs.ruleForm.resetFields();
                },
                //处理编辑（弹出部门更新对话框）
                handleEdit(index, row) {
                    console.log(index, row);
                    this.form =  JSON.parse(JSON.stringify( row));
                    //更新显示名称
                    this.title="用户更新";
                    //对话框显示
                    this.dialogFormVisibles=true;
                },

                dictStatus(row, column, cellValue) {
                    return cellValue == 0 ? '正常' : '停用';
                },

                add(){
                    var _this = this;
                    var url = '/api/cs/dictData/insert'
                    this.$refs.ruleForm.validate((valid) =>{
                        if(valid){
                            _this = this;
                    //提交方法
                    this.$http.post(url,this.ruleForm).then(function (response){
                        console.log(response);
                        //提交成功
                        if(response.data.code==2000){
                            //关闭弹框
                            _this.dialogFormVisible=false;
                            //提示成功添加
                            _this.$message({
                                message: response.data.message,
                                type:'success'
                            });
                            _this.loadData();
                        }else{
                           _this.$message.error(response.data.message); 
                        }
                    })
                    .catch(function (error){
                        _this.$message.error('这是一条错误的消息');
                    });
                        }else{
                            console.log('error submit!!');
                            //this.loadData();
                            return false;
                        }
                    });
                },

               

                Update(){
                    var _this = this;
                    var url = '/api/cs/dictData/update'
                    _this = this;
                    //提交方法
                    this.$http.post(url,this.form).then(function (response){
                        console.log(response);
                        //提交成功
                        if(response.data.code==2000){
                            //关闭弹框
                            _this.dialogFormVisibles=false;
                            //提示成功添加
                            _this.$message({
                                message: response.data.message,
                                type:'success'
                            });
                            _this.loadData();
                        }else{
                           _this.$message.error(response.data.message); 
                        }
                    })
                    .catch(function (error){
                        _this.$message.error('这是一条错误的消息');
                    });
                },

                 
                //处理删除（ 部门删除）
                handleDelete(index, row) {
                    var _this = this;
                    console.log(index, row);
                    _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                       this.$http.delete('/api/cs/dictData/deleteById?dictCode='+row.dictCode)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                }
            },filters: {
        //时间格式处理
        dateFilter: function (data, format = "") {                                                                                                                                                                                                                                                                                                                                                          
            var dt = new Date(data);
            var y = dt.getFullYear();
            var m = (dt.getMonth()+1).toString().padStart(2,"0");
            var d = dt.getDate().toString().padStart(2,"0");
            var h = dt.getHours().toString().padStart(2,"0");
            var mm = dt.getMinutes().toString().padStart(2,"0");
            var s = dt.getSeconds().toString().padStart(2,"0");
            if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                format.toLocaleLowerCase() === "") {
                return `${y}-${m}-${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                return `${y}/${m}/${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                return `${y}-${m}-${d} ${h}:${mm}:${s}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                return `${y}/${m}/${d} ${h}:${mm}:${s}`;
            } else {
                return `输入的时间格式有误`;
            }
        }
  }
    }
</script>
<style>

</style>

